<template>
	<view class="orderlist-box">
		<MyTabs :title="title" :isFixed='true' :activeTabs='isIndex' @tabsHandle="showTitle"></MyTabs>
		<view class="orderlist-big-box">
			<view class="orderlist-big-item"  v-for="(item,index) in orderList" :key="index">
				<view class="orderlist-top-title">
					<view class="orderlist-top-title-left">
						<image class="orderlist-top-title-left-img" :src="item.head_image_url" mode=""></image>
						<text>{{item.contact}}</text>
					</view>
					<view class="orderlist-top-title-right" v-if="isIndex == 0" style="color: #00CB8B;">
						{{item.recycler_status_text}}
					</view>
					<view class="orderlist-top-title-right" v-if="isIndex == 1" style="color: #FF8500;">
						{{item.recycler_status_text}}
					</view>
					<view class="orderlist-top-title-right" v-if="isIndex == 2" style="color: #333;">
						{{item.recycler_status_text}}
					</view>
				</view>
				<view class="orderlist-item-p">
					<view class="orderlist-item-p-left">上门地址</view>
					<view class="orderlist-item-p-right">{{item.province}}{{item.city}}{{item.country}}{{item.address}}</view>
				</view>
				<view class="orderlist-item-p">
					<view class="orderlist-item-p-left">预约时间</view>
					<view class="orderlist-item-p-right">{{item.yuyue_date}} {{item.yuyue_start_time}}~{{item.yuyue_end_time}}</view>
				</view>
				<view class="orderlist-item-p">
					<view class="orderlist-item-p-left">回收类别</view>
					<view class="orderlist-item-p-right">{{item.items}}</view>
				</view>
				<view class="orderlist-item-p">
					<view class="orderlist-item-p-left">预估重量</view>
					<view class="orderlist-item-p-right">{{item.weight}}</view>
				</view>
				<view class="orderlist-item-p">
					<view class="orderlist-item-p-left">预估佣金</view>
					<view class="orderlist-item-p-right" style="color:red">{{item.yg_price ? item.yg_price : '-'}}</view>
				</view>
				<view style="width: 100%;height: 1px;background: #F6F6F6;margin-top: 18px;margin-bottom: 15px;"></view>
				<view class="order-list-bottom">
					<view class="order-list-bottom-dh" @click="gotodaohang" v-if="isIndex == 0" :data-address="item.address" :data-latitude='item.lat' :data-longitude="item.lng"> <image style="width: 14px;height: 14px;margin-right: 5px;" :src="dingweiImg" mode=""></image> 导航</view>
					<view class="order-list-bottom-btn" @click="gotophone" v-if="isIndex == 0" :data-phone='item.mobile'>电话联系</view>
					<view class="order-list-bottom-btn" @click="gotoOrder" :data-id='item.id' :data-type="isIndex">查看详情</view> 
				</view>
			</view>
			<view v-if="orderList.length <= 0" style="width: 100%;text-align: center;margin: 20px 0;">~暂无数据~</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	import myTabs from '../../components/tabs/myTabs.vue'
	import dituKey from '../../utils/setTing.js'
	
	export default {
		data(){
			return{
				userImg:baseUrl+'/uploads/static/image/recovery_my_top_head@2x.png',
				dingweiImg:baseUrl+'/uploads/static/image/dingwei-white.png',
				title:[],
				titleArray:[],
				pages:1,
				isIndex:0,
				orderList:[],
				checkId:'1',//选中顶部ID
			}
		},
		onLoad(options) {
			this.checkId = options.type
			this.titleData()
			this.pages = 1
			if(options.type){
				this.InitList(options.type)
			}else{
				this.InitList(1)
			}
		},
		onReachBottom(){
			this.pages = this.pages+1
			this.InitList(1)
		},
		methods:{
			titleData(){
				let _this = this
				http.getOrderListType().then((res)=>{
					if(res.data.code == 1){
						let data = res.data.data 
						_this.titleArray = res.data.data
						_this.titleArray.forEach((item,index)=>{
							if(item.id == _this.checkId){
								_this.isIndex = index
							}
							_this.title.push(item.name)
						})
					}
				})
			},
			showTitle(index){
				this.isIndex = index
				this.pages = 1
				this.orderList = []
				this.InitList(this.titleArray[index].id)
			},
			InitList(type){
				let _this = this
				uni.showLoading()
				http.getOrderList({status:type,page:_this.pages}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 1){
						_this.orderList = _this.orderList.concat(res.data.data)
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:none
						})
					}
				})
			},
			gotophone(e){
				let phone = e.currentTarget.dataset.phone
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			gotoOrder(e){
				let id = e.currentTarget.dataset.id
				uni.navigateTo({
					url:'/pages/recoveryCenter/orderDetail?id='+id+'&type='+this.isIndex
				})
			},
			gotodaohang(e){
				// let _this = this
				// let plugin = requirePlugin('routePlan');
				// let key = dituKey.key;  //使用在腾讯位置服务申请的key
				// let referer = '小程序';   //调用插件的app的名称
				// let endPoint = JSON.stringify({  //终点
				//     'name': e.currentTarget.dataset.address,
				//     'latitude': e.currentTarget.dataset.latitude,
				//     'longitude': e.currentTarget.dataset.longitude
				// });
				// wx.navigateTo({
				//     url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				// });
				uni.openLocation({
					latitude: Number(e.currentTarget.dataset.latitude),
					longitude: Number(e.currentTarget.dataset.longitude),
					name:e.currentTarget.dataset.address,
					success: function () {
						console.log('success');
					}
				});
			}
		},
		components:{
			myTabs
		}
	}
</script>

<style>
	.orderlist-box{
		width: 100%;
		min-height: 100vh;
		background: #F8F9FD;
		font-family: 'PingFang Bold';
	}
	.orderlist-title{
		width: 100%;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
	}
	.orderlist-title-item{
		width: 100%;
		display: flex;flex-direction: row;align-items: center;
	}
	.orderlist-item-btn{
		flex: 1;
		height: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
	}
	.xianp-box{
		width: 100%;
		height: 3px;
		position: relative;
	}
	.xianp-box-item{
		width: 35px;
		height: 100%;
		background: #00CB8B;
		position: absolute;
		top: 0;
	}
	.orderlist-big-box{
		width: 100%;
		box-sizing: border-box;
		padding: 12px;
	}
	.orderlist-big-item{
		width: 100%;
		background: #fff;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 15px 20px;
		margin-bottom: 12px;
	}
	.orderlist-top-title{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25px;
	}
	.orderlist-item-p{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 12px;
		color: #999;
		margin-bottom: 10px;
	}
	.orderlist-item-p-left{
		width: 55px;
		text-align: justify;
		text-align-last: justify;
		margin-right: 20px;
	}
	.orderlist-item-p-right{
		width: calc(100% - 75px);
	}
	.order-list-bottom{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	.order-list-bottom-left{
		color: #999;
		font-size: 12px;
	}
	.order-list-bottom-btn{
		width: 88px;
		height: 35px;
		color: #999;
		text-align: center;
		line-height: 35px;
		border: 1px solid #999;
		border-radius: 10px;
		margin-right: 10px;
		font-size: 14px;
	}
	.order-list-bottom-dh{
		width: 88px;
		height: 35px;
		color: #fff;
		text-align: center;
		line-height: 35px;
		border: 1px solid #00CB8B;
		background-color: #00CB8B;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		border-radius: 10px;
		margin-right: 10px;
	}
	.order-list-bottom-btn:last-child{
		margin-right: 0px;
	}
	.orderlist-top-title-left{
		font-size: 16px;
		color: #333;
		font-weight: 500;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.orderlist-top-title-left-img{
		width: 36px;
		height: 36px;
		margin-right: 10px;
	}
	.orderlist-top-title-left text{
		font-size: 16px;
	}
	.orderlist-top-title-right{
		font-size: 16px;
		font-weight: 500;
		color: #333;
		line-height: 22px;
	}
</style>